<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 600 500" style="width: 400px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            储能装置在线监测数据
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg
        :viewbox="'0 0 600 500'"
        :svgstyle="'width: 400px'"
        :textname="'单体电池在线监测数据'"
      ></cn-svg>
      <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          placeholder="请输入电池编号："
          ref="cell-input"
        />
        <div class="time-container">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search" @click="fetch_data">查询</button>
      </div>
      <!-- 调用组件cnsearch 无法传入单击事件 -->
      <!-- <cn-search @cnclick="fetch_data"></cn-search> -->
    </div>
    <div class="main-content">
      <back-1 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">电压数据</div>
          <div style="font-size: 16px">Voltage Data</div>
        </div>
        <roll-chart :option="vdata" :step1="5" :step2="1" :intv="2" />
      </back-1>
      <gap style="width: 15%" />
      <back-2 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">电流数据</div>
          <div style="font-size: 16px">Current Data</div>
        </div>
        <roll-chart :option="idata" :step1="5" :step2="1" :intv="2" />
      </back-2>
      <gap style="width: 15%" />
      <back-3 style="width: 100%">
        <div slot="title">
          <div style="font-size: 28px">温度数据</div>
          <div style="font-size: 16px">Temperature Data</div>
        </div>
        <roll-chart :option="tdata" :step1="5" :step2="1" :intv="2" />
      </back-3>
    </div>
  </div>
</template>

<script>
import Back1 from "./Back1.vue";
import Back2 from "./Back2.vue";
import Back3 from "./Back3.vue";
import Gap from "./Gap.vue";
import RollChart from "./RollChart.vue";
import { generateXAxis, generateYAxis } from "../utils/chart_tools";
// import VT from "../assets/vt.json";
import cnSvg from "./cn-svg.vue";
import { mapGetters } from "vuex";
// import cnSearch from "./cn-search.vue";
export default {
  components: { Back1, Back2, Back3, Gap, RollChart, cnSvg },
  data() {
    return {
      vdata: {},
      idata: {},
      tdata: {},
      // cell: '1'
    };
  },
  computed: {
    ...mapGetters(["cell_data"]),
  },
  watch: {
    // eslint-disable-next-line
    cell_data(val) {
      this.fetch_data();
    },
  },
  methods: {
    async fetch_data() {
      try {
        let cell = this.$refs["cell-input"].value;
        // notify.notify(cell, 1)
        let data;
        if (cell === "") {
          data = this.cell_data[0];
        } else {
          try {
            cell = parseInt(cell) - 1;
            if(cell < 0) {
              cell = 0
            }
          } catch {
            // notify.notify("请输入正确的电池串编号", 1);
            cell = 0;
          }
          data = this.cell_data[cell % this.cell_data.length];
        }

        this.process_vdata(data["电压"]);
        this.process_tdata(data["温度"]);
        this.process_idata(data["电流"]);
      } catch (e) {
        console.log(e);
      }
      // console.log(data)
    },

    process_vdata(data) {
      // console.log(VT)
      // data = VT.V;


      let opt = {
        // 折线颜色修改,默认是蓝色
        color: ["#66d0e3"],
        // 图例组件
        // legend: {
        //   data: ["电压"],
        // },
        // 绘制坐标系格网
        grid: {
          left: "20%",
        },
        xAxis: generateXAxis(data.length),
        // 配置图表内容
        series: [
          {
            name: "电压",
            // 图表类型 ( line 是折线图 )
            type: "line",
            showSymbol: false,
            data: data,
          },
        ],
        // 传入纵坐标名称与单位
        yAxis: generateYAxis({ label: "电压" + " / ", unit: "V" }),
      };
      this.vdata = opt;
    },

    process_idata(data) {

      let opt = {
        color: ["#66d0e3"],
        // legend: {
        //   data: ["电流"],
        // },
        grid: {
          left: "20%",
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "电流",
            type: "line",
            showSymbol: false,
            data: data,
          },
        ],
        // 传入纵坐标名称与单位
        yAxis: generateYAxis({
          label: "电流" + " / ",
          unit: "mA",
        }),
      };
      this.idata = opt;
    },
    process_tdata(data) {
      // data = VT.T;

  
      let opt = {
        // 折线颜色修改,默认是蓝色
        color: ["#66d0e3"],
        // legend: {
        //   data: ["温度"],
        // },
        grid: {
          left: "20%",
        },
        xAxis: generateXAxis(data.length),
        series: [
          {
            name: "温度",
            type: "line",
            showSymbol: false,
            data: data,
          },
        ],
        // 传入纵坐标名称与单位
        yAxis: generateYAxis({ label: "温度" + " / ", unit: "℃" }),
      };
      this.tdata = opt;
    },
  },

  mounted() {
    this.fetch_data();
  },
};
</script>

<style>
</style>